<template>
  <div class="login-form-wrapper">
    <div class="login-form-title">注册</div>
    <div class="login-form-error-msg">{{ errorMessage }}</div>
    <a-form ref="loginForm" :model="registerInfo" class="login-form" layout="vertical" @submit="handleSubmit">
      <!-- 账号 -->
      <a-form-item field="userAccount" :rules="[{ required: true, message: '账号不能为空' }]"
        :validate-trigger="['change', 'blur']" hide-label>
        <a-input v-model="registerInfo.userAccount" :placeholder="$t('请输入用户名')">
          <template #prefix>
            <icon-user />
          </template>
        </a-input>
      </a-form-item>
      <!-- 密码 -->
      <a-form-item field="userPassword" :rules="[{ required: true, message: '密码不能为空' }]"
        :validate-trigger="['change', 'blur']" hide-label>
        <a-input-password v-model="registerInfo.userPassword" :placeholder="$t('请输入密码')" allow-clear>
          <template #prefix>
            <icon-lock />
          </template>
        </a-input-password>
      </a-form-item>
      <!-- 确认密码 -->
      <a-form-item field="checkPassword" :rules="[{ required: true, message: '确认密码不能为空' }]"
        :validate-trigger="['change', 'blur']" hide-label>
        <a-input-password v-model="registerInfo.checkPassword" :placeholder="$t('请输入确认密码')" allow-clear>
          <template #prefix>
            <icon-lock />
          </template>
        </a-input-password>
      </a-form-item>

      <a-space :size="16" direction="vertical">
        <a-button type="primary" html-type="submit" long :loading="loading">
          注册
        </a-button>
        <a-button href="/login" type="text" long class="login-form-register-btn">
          返回
        </a-button>
      </a-space>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { Message } from '@arco-design/web-vue';
import { useUserStore } from '@/store';
import useLoading from '@/hooks/loading';
import { register } from '@/api/user'


const router = useRouter();
const errorMessage = ref('');
const { loading, setLoading } = useLoading();
const userStore = useUserStore();

// reactive：创建响应式对象，不需要 .value 来访问
const registerInfo = reactive({
  userAccount: '',
  userPassword: '',
  checkPassword: '',
});

/**
 * 注册函数
 */
const handleSubmit = async () => {
  // 调用注册接口
  const res = await register(registerInfo);
  Message.success('注册成功')
  // 注册成功跳转登陆页面
  router.push('/login')
}
</script>

<style lang="less" scoped>
.login-form {
  &-wrapper {
    width: 320px;
  }

  &-title {
    color: var(--color-text-1);
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
  }

  &-sub-title {
    color: var(--color-text-3);
    font-size: 16px;
    line-height: 24px;
  }

  &-error-msg {
    height: 32px;
    color: rgb(var(--red-6));
    line-height: 32px;
  }

  &-password-actions {
    display: flex;
    justify-content: space-between;
  }

  &-register-btn {
    color: var(--color-text-3) !important;
  }
}
</style>
